<template>
    <div class="f-root">
        <div class="top">
            <router-link :to="'/liang'" class="top1">
                <span class="liang">
                    <img src='../assets/liang.png'>
                </span>
                <br>
                <span class="bb">良品购</span>
            </router-link>
            <router-link :to="'/shang'" class='top1'>
                <span class="shang">
                    <img src='../assets/shang.png'>
                </span>
                <br>
                <span class="bb">商店</span>
            </router-link>
            <a href="https://m.duitang.com/blog/list/category/?id=5017d172705cbe10c0000007&title=%E7%BE%8E%E9%A3%9F%E8%8F%9C%E8%B0%B1" class='top1'>
                <span class="mei">
                    <img src='../assets/mei.jpg'>
                </span>
                <br>
                <span class="bb">美食菜谱</span>
            </a>
            <a href="https://m.duitang.com/blog/list/category/?id=5017d172705cbe10c0000004&title=%E5%AE%B6%E5%B1%85%E7%94%9F%E6%B4%BB" class='top1'>
                <span class="jia">
                    <img src='../assets/jia.png'>
                </span>
                <br>
                <span class="bb">家居生活</span>
            </a>
        </div>
        <div class="bottom">
            <a href="https://m.duitang.com/blog/list/category/?id=5017d172705cbe10c0000008&title=%E5%A3%81%E7%BA%B8" class="bot1">
                <span class='bi'>
                    <img src='../assets/bi.jpg'>
                </span>
                <br>
                <span class="bb">壁纸</span>
            </a>
            <a href="https://m.duitang.com/blog/list/category/?id=540ea7ed586df58a31a135d2&title=%E5%A4%B4%E5%83%8F" class='bot1'>
                <span class='tou'>
                    <img src='../assets/tou.jpg'>
                </span>
                <br>
                <span class="bb">头像</span>
            </a>
            <a href="https://m.duitang.com/blog/list/category/?id=540ead31586df58a2bef4d7a&title=%E8%A1%A8%E6%83%85" class='bot1'>
                <span class='biao'>
                    <img src='../assets/biao.png'>
                </span>
                <br>
                <span class="bb">表情</span>
            </a>
            <router-link :to="'/more'" class='bot1'>
                <span class='fa fa-list-ul'></span>
                <br>
                <span class="bb fen">更多分类</span>
            </router-link>
        </div>
    </div>
</template>

<script>
import Gengduo from './Gengduo'
export default {
    components:{
        Gengduo
    },
    props:['']
}
</script>

<style scoped>
.bb {
    font-size: 12px;
    color: #818181;
}

.top {
    display: flex;
    justify-content: space-between;
    background-color: #FDFDFD;
}

.top1 {
    border-right: 0.1px solid #E0E0E0;
    border-bottom: 0.1px solid #E0E0E0;    
    flex-basis: 25%;
    box-sizing: border-box;
    padding: 20px 10px 10px 10px;
    height: 100px;
    text-align: center;
    line-height: 25px;
}

.liang {
    width: 34px;
    height: 34px;
    padding-bottom:-5px; 
}

.liang img {
    width: 28px;
    height: 28px;
}
.shang {
    width: 34px;
    height: 34px;
}

.shang img {
    width: 28px;
    height: 28px;
}
.mei {
    width: 34px;
    height: 34px;
}

.mei img {
    width: 28px;
    height: 28px;
}
.jia {
    width: 34px;
    height: 34px;
}

.jia img {
    width: 28px;
    height: 28px;
}
.fa-shopping-bag {
    font-size: 34px;
    color: #F1C40F;
}

.bottom {
    display: flex;
    justify-content: space-between;
}

.bot1 {
    height: 100px;
    border-right: 0.1px solid #E0E0E0;
    flex-basis: 25%;
    box-sizing: border-box;
    padding: 20px 10px 10px 10px;
    text-align: center;
    background-color: white;
}

.bi {
    width: 34px;
    height: 34px;
}

.bi img {
    width: 28px;
    height: 28px;
}

.tou {
    width: 34px;
    height: 34px;
}

.tou img {
    width: 28px;
    height: 28px;
}

.biao {
    width: 34px;
    height: 34px;
}

.biao img {
    width: 28px;
    height: 28px;
}

.fa-list-ul {
    font-size: 32px;
    color: #3799DB;
}

.fen {
    padding-bottom: 3px;
}
</style>
